<template name="consult">
  <div>
    <h3 class="title">马蜂窝旅游网最新资讯</h3>
    <p class="group" v-for="item in consultList" :key="item.id">
      <span class="time">{{item.time}}</span>
      <a :href="item.nameUrl" class="nameA">{{item.name}}</a>
    </p>
  </div>
</template>

<script>
export default {
  name: "consult",
  data() {
    return {
      consultList: []
    };
  },
  methods: {
    getData() {
      let data = [
        {
          id: 0,
          time: "04月07日",
          name: "马蜂窝“云旅游”直播的攻与守",
          nameUrl: "javascript:;"
        },
        {
          id: 1,
          time: "04月01日",
          name: "马蜂窝的“云上战疫”",
          nameUrl: "javascript:;"
        },
        {
          id: 2,
          time: "02月19日",
          name: "科技“战疫” ：马蜂窝大数据赋能旅游业",
          nameUrl: "javascript:;"
        },
        {
          id: 3,
          time: "02月13日",
          name: "陈罡：疫情下旅游业的“守恒与求变”",
          nameUrl: "javascript:;"
        },
        {
          id: 4,
          time: "02月06日",
          name: "马蜂窝将退订完成率定为最高KPI",
          nameUrl: "javascript:;"
        },
        {
          id: 5,
          time: "09月28日",
          name: "国庆白领出游偏好调查：超7成在旅途中工作，更愿意错峰出行",
          nameUrl: "javascript:;"
        }
      ];

      this.consultList = data
    }
  },
  mounted(){
      this.getData()
  }
};
</script>

<style lang="stylus" scoped>
.title {
  font-weight: normal;
  margin-bottom: 20px;
}

.group {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  .nameA {
    padding-left: 5px;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>